// eslint-disable-next-line import/no-unresolved
import vueUseOnClickOutside from '@/views/vueUse-onClickOutside/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueUseUseEventListener from '@/views/vueUse-useEventListener/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import pulsatingAudio from '@/views/pulsatingAudio/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueEffectApis from '@/views/vueEffectApis/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueUseUseMutationObserver from '@/views/vueUse-useMutationObserver/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueUseTitle from '@/views/vueUse-useTitle/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueUseVModel from '@/views/vueUse-useVModel/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueUseVModelChi from '@/views/vueUse-useVModel/chi.vue?raw';
// eslint-disable-next-line import/no-unresolved
import vueUseMouse from '@/views/vueUse-useMouse/index.vue?raw';
// eslint-disable-next-line import/no-unresolved
import useEventListener from '@/assets/js/hooks/useEventListener?raw';
// eslint-disable-next-line import/no-unresolved
import onClickOutside from '@/assets/js/hooks/onClickOutside?raw';
// eslint-disable-next-line import/no-unresolved
import useMutationObserver from '@/assets/js/hooks/useMutationObserver?raw';
// eslint-disable-next-line import/no-unresolved
import useTitle from '@/assets/js/hooks/useTitle?raw';
// eslint-disable-next-line import/no-unresolved
import useVModel from '@/assets/js/hooks/useVModel?raw';
// eslint-disable-next-line import/no-unresolved
import useMouse from '@/assets/js/hooks/useMouse?raw';
// eslint-disable-next-line import/no-unresolved
import sharedRaw from '@/assets/js/hooks/shared?raw';
// eslint-disable-next-line import/no-unresolved
import useMouseComponent from '@/views/vueUse-useMouse/component?raw';

function splitScript(str) {
  const newStr = str.match(/(?<=<script\ssetup>).*(?=<\/script>)/gs);
  return newStr ? newStr[0] : '';
}

function hookCodeFragmentFormat(str) {
  const shared = str.match(/import.*'.\/shared'/gs);
  if (!shared) return `\r\n${str}`;
  const sharedImport = shared[0].split(/(;\r\n|;\n)/).find((f) => f.includes('./shared'));
  const funcArr = sharedImport.match(/(?<={).*(?=})/gs)[0].replaceAll('\r\n', '').split(',');
  let newShared = '';
  const sharedRawSplit = sharedRaw.split('// --');
  funcArr.filter(Boolean).forEach((funName) => {
    const newFunName = funName.trim();
    const pattern = RegExp(`(function|const)\\s${newFunName}`);
    newShared += sharedRawSplit.find((f) => pattern.test(f));
  });

  return `\r\n${str}`.replace(`${sharedImport};`, newShared);
}

const vueUseUseEventListenerSplit = splitScript(vueUseUseEventListener).split('// codeFragment-split');
const onClickOutside1 = splitScript(vueUseOnClickOutside).split('// codeFragment-split').pop();
const effectApis = splitScript(vueEffectApis).split('// codeFragment-split').pop();
const pulsatingAudio1 = splitScript(pulsatingAudio).split('// codeFragment-split').pop();
const useMutationObserver1 = splitScript(vueUseUseMutationObserver).split('// codeFragment-split').pop();
const vueUseTitle1 = splitScript(vueUseTitle).split('// codeFragment-split').pop();
const vueUseVModel1 = splitScript(vueUseVModel).split('// codeFragment-split').pop()
    + splitScript(vueUseVModelChi).split('// codeFragment-split').pop();
const vueUseMouse1 = splitScript(vueUseMouse).split('// codeFragment-split').pop();
export default {
  'localStorage-1': `
// 获取localStorage项
window.localStorage.getItem(key: string)
// 设置localStorage项
window.localStorage.setItem(key: string, value: string)
// 移除localStorage项
window.localStorage.removeItem(key: string, value: string)
// 移除所有localStorage项
window.localStorage.clear(key: string, value: string)`,
  'localStorage-2': `
// 当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件
window.addEventListener('storage', (e) => {
  let {
    key,// 被修改的键值
    newValue,// 修改后的新值
    oldValue, // 修改前的原值
    storageArea, // 被操作的 storage 对象
    url,// key 发生改变的对象所在文档的 URL 地址
  } = e
});`,
  'scrollSnap-1': `
.scrollSnap-container{
  // x轴 强制吸附
  scroll-snap-type: x mandatory;
  // x轴 接近时吸附
  scroll-snap-type: x proximity;
}
.scrollSnap-container > div{
    // 对齐位置
    scroll-snap-align: start;
    // 吸附停止 永远停在下一个元素上
    scroll-snap-stop: always;
}`,
  'scrollSnap-2': `
.scrollSnap-container{
  // y轴 强制吸附
  scroll-snap-type: y mandatory;
}
.scrollSnap-container > div{
    // 对齐位置
    scroll-snap-align: start | center | end;
    // 吸附停止 永远停在下一个元素上
    scroll-snap-stop: always;
}`,
  'router-1': `
const compModules = import.meta.glob('../../views/*/index.vue');
// vite 生成的代码
const compModules = {
  '../../views/a/index.vue': () => import('../../views/a/index.vue'),
  '../../views/b/index.vue': () => import('../../views/b/index.vue'),
}
// 遍历 compModules 生成router信息
Object.entries(compModules).map(([ pagePath, component ]) => {
  // 保留文件夹名称用作path
  const path = pagePath.replace('../../views/', '').replace('/index.vue', '');
  router.addRoute({
    path,
    name: path,
    component: component
  });
})`,
  'router-2': `
const modules = import.meta.glob('./dir/*.js', {
  // value为直接引入的模块
  eager: true,
  // 加载默认导出
  import: 'default',
  // 可拼接url
  query: { foo: 'bar', bar: true },
})`,
  'mixBlendModel-1': `
.mixBlendMode-container > p{
  // 正片叠底 底色与混合颜色相乘，结果颜色总是较暗的颜色。
  mix-blend-mode: multiply;
  // 滤色
  mix-blend-mode: screen;
  // 取差值
  mix-blend-mode: difference;
}`,
  'mixBlendModel-2': `
.mixBlendMode-container > p{
  color: #fff;
  // 取差值
  mix-blend-mode: difference;
}`,
  'mixBlendModel-3': `
.mixBlendMode-container > p{
  color: #000;
  background-color: #fff;
  // 滤色
  mix-blend-mode: screen;
}`,
  'pulsatingAudio-1': pulsatingAudio1,
  'vue-1': effectApis,
  'vueUse-useEventListener-1': vueUseUseEventListenerSplit[1],
  'vueUse-useEventListener-2': hookCodeFragmentFormat(useEventListener),
  'vueUse-useEventListener-3': vueUseUseEventListenerSplit[2],
  'vueUse-onClickOutside-1': onClickOutside1,
  'vueUse-onClickOutside-2': hookCodeFragmentFormat(onClickOutside),
  'vueUse-useMutationObserver-1': useMutationObserver1,
  'vueUse-useMutationObserver-2': hookCodeFragmentFormat(useMutationObserver),
  vueUseTitle1,
  vueUseTitle2: hookCodeFragmentFormat(useTitle),
  vueUseVModel1,
  vueUseVModel2: hookCodeFragmentFormat(useVModel),
  vueUseMouse1,
  vueUseMouse2: hookCodeFragmentFormat(useMouse),
  vueUseMouse3: hookCodeFragmentFormat(useMouseComponent)
};
